<template>
  <div class="video-container" :class="`child-count-${dataSetting.videoInfo.current}`" :style="{pointerEvents:isOperable?'auto':'none'}">
    <div
      class="video-item"
      v-for="(item, index) in dataSetting.videoInfo.urls"
      :key="item.id"
    >
      <div class="com-full video-frame">
        <div class="com-full video">
          <video
            ref="videoRefs"
            :id="item.id"
            class="video-item"
            autoplay
            controls
            controlslist="nodownload noplaybackrate"
            @dblclick="onFullscreen(item.id)"
          ></video>
        </div>
        <div class="video-info">
          <span class="title">视频描述：</span>
          <span class="title">{{ item.label }}</span>
          <FullscreenOutlined class="full-btn" @click="onFullscreen(item.id)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, reactive } from 'vue';
import { FullscreenOutlined } from "@ant-design/icons-vue";
import flvjs from "flv.js";
import { guid } from "@/utils";
import { watch } from '@vue/reactivity';

const props = defineProps({
  dataSetting: {
    type: Object,
    required: true,
  },
  isOperable: {
      type: Number,
      default: 0
  },
});

const videoRefs = ref([]);

// 初始化 FLV 播放器
const initPlayer = (item) => {
  if (flvjs.isSupported()) {
    const videoElement = document.getElementById(item.id);
    if (!videoElement) return;

    item.player = flvjs.createPlayer({
      type: "flv",
      isLive: true,
      hasAudio: false,
      url: item.value,
    });
    item.player.attachMediaElement(videoElement);
    item.player.load();
    item.player.play();
  }
};

// 销毁 FLV 播放器
const destroyPlayer = (item) => {
  if (item.player) {
    item.player.destroy();
    item.player = null;
  }
};

// 全屏操作
const onFullscreen = (videoId) => {
  const videoElement = document.getElementById(videoId);
  if (videoElement && videoElement.requestFullscreen) {
    videoElement.requestFullscreen();
  }
};


onMounted(() => {
  props.dataSetting.videoInfo.urls.forEach((item) => {
    item.id = guid(); // 为每个视频生成唯一 ID
    initPlayer(item);
  });
});

onUnmounted(() => {
  props.dataSetting.videoInfo.urls.forEach((item) => destroyPlayer(item));
});
</script>

<style scoped lang="scss">
.video-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;

  .video-item {
    background-color: lightblue;
    border: 1px solid #efffff;
    box-sizing: border-box;
  }

  &.child-count-1 .video-item {
    width: 100%;
    height: 100%;
    flex: 1 1 100%;
  }

  &.child-count-4 .video-item {
    flex: 1 1 50%;
  }

  &.child-count-9 .video-item {
    width: 33.33%;
    height: 33.33%;
    flex: 1 1 33.33%;
  }
}

.video-frame {
  position: relative;

  .video {
    background: #fff;
  }

  .video-item {
    width: 100%;
    height: 100%;
  }

  .video-info {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 26px;
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    display: flex;
    align-items: center;

    .title {
      margin-left: 7.5px;
      font-size: 9px;
    }

    .full-btn {
      position: absolute;
      top: 6px;
      right: 10px;
      cursor: pointer;
    }
  }
}
</style>
